// banner
let oimgs=document.getElementsByClassName(" img3")
let oli=document.getElementsByClassName(" oli")
// 记录图片进出
let ord=0
    // 1、每隔一秒钟换一张图片（同时豆豆发生变化）
    function autoPlay() {
        myTimer = setInterval(function () {            
            // 跳转到下一张图片
            goImg(ord+1);
        }, 3000);
    }
    // 2、点击豆豆换图片     
    // 其实goImg函数就是显示指定的图片
    function goImg(transOrd){ //4
        // 一、数据处理
        // 1、计算数据
         var outOrd = ord; //2
         ord = transOrd;
        //  2、边界处理
        if(ord<0){
             ord=5;
        }
         if(ord>5){
            ord = 0;
         }

        //二、外观呈现
        // 1、图片进入和离开
           // 1）、出去
            mover03(oimgs[outOrd], "left", -2000, 500);
            // 2）、进入
            oimgs[ord].style.left = "100%";
            mover03(oimgs[ord], "left", 0, 500);
            //   2、让豆豆的颜色发生变化
            // 1）、出去
            oli[outOrd].style.backgroundColor = "#ccc";
            // 2）、进入
            oli[ord].style.backgroundColor = "red";
    }
    window.onload = function () {
        autoPlay();
        // 给每个豆豆绑定事件
        for(let i=0;i<oli.length;i++){
           oli[i].onclick = function(){
                goImg(i);
           }
        }
    
    }
